<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { getWhosAPI } from '@/api/search/index'
import { HttpCodeEnum } from '@packages/share/enums'
import { type AxiosResponse } from 'axios'
import { Warning } from '@element-plus/icons-vue'
const props = defineProps({
  id: { type: String, required: true }
})
const descriptions = reactive({
  columns: [
    { label: '起始 IP 地址: ', prop: 'startIp' },
    { label: '地址范围（从起始 IP 到结束 IP）: ', prop: 'addressRange' },
    { label: '结束 IP 地址: ', prop: 'endIp' },
    { label: '网络名称: ', prop: 'networkName' },
    { label: '自治系统号（ASN）: ', prop: 'asn' },
    { label: '分配时间: ', prop: 'allocationTime' },
    { label: ' 注册组织: ', prop: 'registrationOrganization' },
    { label: '电子邮件: ', prop: 'email' },
    { label: '电话: ', prop: 'phone' },
    { label: '传真: ', prop: 'fax' },
    { label: '名称: ', prop: 'name' },
    { label: '国家: ', prop: 'country' },
    { label: '省份: ', prop: 'province' },
    { label: '城市: ', prop: 'city' },
    { label: '街道: ', prop: 'street' },
    { label: '状态: ', prop: 'status' },
    { label: '最后验证时间: ', prop: 'lastVerificationTime' },
    { label: '变更信息: ', prop: 'changeInfo' },
    { label: '路由: ', prop: 'route' },
    { label: '组织: ', prop: 'organization' },
    { label: '描述: ', prop: 'description' },
    { label: '维护者: ', prop: 'mntBy' },
    { label: '维护者内部参考: ', prop: 'mntIrt' },
    { label: '维护参考: ', prop: 'mntRef' },
    { label: '维护的路由: ', prop: 'mntRoutes' },
    { label: '数据来源: ', prop: 'source' },
    { label: '国家中文名称: ', prop: 'countryCn' }
  ],
  data: {}
})

const getInfo = (id: string) => {
  getWhosAPI(id).then((res: AxiosResponse) => {
    const { data, code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      descriptions.data = data
    }
  })
}
onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <div class="title-contianer">
    <div class="title">基本信息</div>
    <jm-icon><Warning /></jm-icon>
  </div>
  <jm-card shadow="never">
    <jmp-descriptions
      :column="2"
      v-model:columns="descriptions.columns"
      v-model:data="descriptions.data"
      :border="false"
    ></jmp-descriptions>
  </jm-card>

</template>
<style scoped lang="scss">
.title-contianer {
  display: flex;
  align-items: center;
  margin-bottom: 0.625rem;
  .title {
    font-weight: 700;
    margin-right: 0.625rem;
  }
}
</style>
